<!--
 * @Description: 添加/展示/编辑消息模板的弹窗
 * @Version: 1.0
 * @Autor: chen_yt
 * @Date: 2020-11-02 17:15:31
 * @LastEditors: chen_yt
 * @LastEditTime: 2022-09-21 14:57:07
-->

<template>
  <div class="dialog-for-column">
    <fks-dialog
      v-if="Visible"
      :visible.sync="Visible"
      :append-to-body="true"
      width="600px"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      @close="close"
    >
      <template slot="title">
        <i class="fks-icon-plus" />
        <span>{{ LANG.ADD }}</span>
      </template>

      <div class="column-edit">
        <fks-form ref="Form" :model="Form">
          <fks-form-item
            :span="24"
            :label="LANG.APPLYNAME"
            prop="name"
            required
          >
            <fks-input v-model="Form.name" maxlength="50" show-word-limit />
          </fks-form-item>
          <fks-form-item :span="24" :label="LANG.RUN_ADDRESS" prop="entry">
            <fks-input v-model="Form.entry" maxlength="50" show-word-limit />
          </fks-form-item>
        </fks-form>
      </div>
      <!-- 提交按钮 -->
      <template slot="footer">
        <fks-button type="primary" icon="fks-icon-check" @click="submit">
          {{ LANG.SAVE }}
        </fks-button>
      </template>
    </fks-dialog>
  </div>
</template>

<script>
export default {
  name: 'register',
  components: {},
  props: {
    visible: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      Visible: false,
      Form: {}
    }
  },
  computed: {},

  watch: {
    visible: {
      immediate: true,
      handler: function (val) {
        this.Visible = val
        console.log(this.visible)
        if (val) {
          this.resetData()
        }
      }
    }
  },
  mounted() {},
  methods: {
    submit() {
      this.$refs['Form'].validate((valid) => {
        if (valid) {
          this.$emit('submit', this.Form)
        }
        if (!valid) {
          this.$message({
            type: 'error',
            message: this.LANG.INCOMPLETE_FILLING
          })
          return
        }
      })
    },

    resetData() {
      this.Form = {}
    },

    close() {
      this.resetData()
      this.$emit('update:visible', false)
    }
  }
}
</script>

<style scoped lang="scss">
::v-deep .fks-dialog__body {
  padding-bottom: 0;
}
</style>
